﻿<template>
    <div v-bind="$attrs" style="border:1px solid #ccc; padding:4px; min-height:40px;">
        <template v-for="r in items" :key="r">
            <div v-if="r.TypeOf==1" class="text-block">
                <div v-html="r.Content" style="width: 98%; white-space: pre-wrap; "></div>
            </div>
            <div v-if="r.TypeOf==2" class="image-block">
                <div class="image-list">
                    
                    <MyPhotoGallery v-model="r.photo" :disabled="true" style="width: 100%;" />
                </div>
            </div>
            <div v-if="r.TypeOf==3" class="image-block">
                <div class="image-list">
                    <MyPhotoGallery v-model="r.photo" :disabled="true" style="width: 100%;" />
                </div>
            </div>
        </template>
        <div v-if="!disabled" style="text-align:right">
            <el-icon :size="size" @click="handleEditor"><Edit /></el-icon>
        </div>
    </div>
</template>

<script setup>
    import { ref, watchEffect } from 'vue';
    import MyPhotoGallery from '../MyPhotoGallery.vue'

    const props = defineProps({
        modelValue: String,
        disabled: Boolean,
        ossServer:Boolean,
        extData:Object,
        allowVideo:Boolean,
        size: {
            type: Number,
            default: 24
        },
    })
    const emits = defineEmits(["update:modelValue","change"]);

    const items = ref([]);

    watchEffect(() => {
        if (!props.modelValue) {
            items.value = [];
            return;
        }
        let newits = JSON.parse(props.modelValue);
        items.value = newits.map(p => {
            let newitem = { ...p };
            if (newitem.ImageList) {
                newitem.photo = newitem.ImageList.join(";");
                delete newitem.ImageList;
            }
            return newitem;
        })
    })

    
    const handleEditor = function () {
        let cfg = {
            modelValue: props.modelValue,
            title: "内容编辑",
            required: false,
            disabled: false,
            ossServer: props.ossServer,
            extData: props.extData,
            allowVideo: props.allowVideo,
            "onUpdate:modelValue": (val) => {
                emits("update:modelValue", val);
                emits("change", val);
            }
        }
        $server.dlg.open("TextAndImgEditDlg", cfg);
    }

    const handleAdd = function () {
        let cfg = {
            modelValue: props.modelValue,
            title: "内容编辑",
            required: false,
            disabled: false,
            ossServer: props.ossServer,
            extData: props.extData,
            "onUpdate:modelValue": (val) => {
                emits("update:modelValue", val);
                emits("change", val);
            }
        }
        $server.dlg.open("TextAndImgEditDlg", cfg);
    }

</script>

<style scoped>
    .text-block {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px dashed #ccc;
    }
</style>